<script setup>
import { getArticlePageAPI } from '@/api'
import AuthorCard from '@/components/front/AuthorCard.vue'
import errorLogger from '@/utils/errorLogger'
import { ref, reactive, onMounted } from 'vue'
import ArticleCard from '@/components/front/ArticleCard.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 跳转到文章详情页
const gotoArticleDetail = (id) => {
  router.push({
    name: 'ArticlePreview',
    params: { id },
  })
}

// 分页参数
const pageParams = reactive({
  currentPage: 1,
  pageSize: 10,
})

const articleList = ref([])
const total = ref(0)

const getArticles = async () => {
  try {
    const result = await getArticlePageAPI(pageParams)
    articleList.value = result.data.list
    total.value = result.data.total
  } catch (error) {
    errorLogger(error)
  }
}

onMounted(() => {
  getArticles()
})
</script>

<template>
  <div class="main-container">
    <div class="article-cards">
      <ArticleCard
        v-for="(item, index) in articleList"
        :key="item._id || index"
        :article="item"
        @click="gotoArticleDetail(item._id)" />

      <el-pagination
        v-model:current-page="pageParams.currentPage"
        v-model:page-size="pageParams.pageSize"
        background
        layout="prev, pager, next"
        :total="total" />
    </div>

    <div class="sidebar">
      <AuthorCard />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-container {
  .article-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .el-pagination {
      margin: 0 auto;
    }
  }

  .sidebar {
    display: none;
  }
}

@media (min-width: 1024px) {
  .main-container {
    display: flex;
    gap: 28px;

    .article-cards {
      flex-grow: 1;
      max-width: calc(100% - 328px);
    }

    .sidebar {
      display: block;
      width: 300px;
      height: fit-content;
    }
  }
}
</style>
